<template>
  <!-- <el-popover v-model="searchShow" placement="bottom-start" trigger="click">
    <template>
        <slot></slot>
        <div v-if="status" class="mt4">
          <el-select size="medium" clearable style="width: 220px" v-model="review_status" placeholder="请选择审核状态搜索" @change="onChange">
            <el-option
              v-for="item in reviewStatus"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          </div>
        <div class="mt8">
          <el-button
            size="medium"
            type="primary"
            icon="el-icon-search"
            @click="search"
            >搜索</el-button>
            <el-button size="medium" @click="clearSearch">重置</el-button>
        </div>
    </template>
    <p class="button shou" size="medium" slot="reference"
      >查询<i class="el-icon-arrow-down el-icon--right"></i>
    </p>
  </el-popover> -->
  <div>
    <div class="search_bottom" >
      <slot></slot>
    </div>
    <div class="flex-align-center">
      <el-button size="medium" plain type="primary" icon="el-icon-search" @click="search">搜索</el-button>
      <el-button size="medium" @click="clearSearch" icon="el-icon-refresh-left">重置</el-button>
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script>
import {reviewStatus} from "@/assets/js"
import { debounce } from "@/utils/index";
export default {
    name:'search',
    props:{
      status:{
        default: false,
        type: Boolean
      },
      self:{
        default: false,
        type: Boolean
      }
    },
    data(){
        return{
            reviewStatus,
            searchShow: false,
            review_status: null,
            // enterFn: () => {
            //   let theEvent = window.event || e;
            //   let code = theEvent.keyCode || theEvent.which || theEvent.charCode;
            //   if (code == 13 && this.searchShow) {
            //     this.search()
            //   }
            // }
        }
    },
    mounted(){
      // document.addEventListener('keydown',this.enterFn)
    },
    destroyed(){
      // document.removeEventListener('keydown',this.enterFn)
    },
    methods:{
      onChange(status){
        this.$parent.pageparm.page = 1
        this.$parent.pageparm.review_status = status
        this.$parent.getList(); 
      },
      search: debounce(function(){
        this.$parent.pageparm.page = 1
        this.$parent.getList(); 
        this.searchShow = false;
      },500,true),
      clearSearch:debounce(function(){
        if(this.self){
          this.searchShow = false;
          this.$emit('clearSearch')
          return
        }
        let pageparm = {...this.$parent.pageparm}
        let newPageparm = {
          page: 1,
          perPage: pageparm.perPage,
          total: pageparm.total,
          sort_str: pageparm.sort_str,
          sort_order: pageparm.sort_order,
        }
        if(this.status) newPageparm.review_status = null
        this.$parent.pageparm = newPageparm
        this.$parent.getList(); 
        this.searchShow = false;
        this.$emit('clearSearch')
      },500,true)
    }
};
</script>

<style lang='less' scoped>
// .button{
//   box-sizing: border-box;
//   padding: 6px 15px 8.5px;
//   font-size: 12px;
//   border: 1px solid #dcdfe6;
//   color: #606266;
//   border-radius: 3px;
//   color: #606266;
//   font-family: Arial, Helvetica, sans-serif;
// }
// .button:hover{
//   color: #409EFF;
//   border-color: #c6e2ff;
//   background-color: #ecf5ff;
// }
.search_bottom{
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid #DCDFE6;
}

</style>